<template>
  <div id="toConsultation" class="person-detail">
    <div>
      <van-nav-bar title="我要咨询" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="toConsultation-body">
      <van-tabs type="line" color="#DC4630 " title-active-color="#DC4630 " title-inactive-color="#333333"
        v-model="chooseTab">
        <van-tab title="常见问题">
          <div class="skillsTraining-search">
            <van-search placeholder="请输入咨询的问题" v-model="value" @input="search()" />
          </div>
          <div>
            <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item, index) in feedBackContentList" :key="index" class="toConsultation-question">
                  <p>{{ item.problem }}</p>
                  <div v-if="item.answer" style="word-break:break-all" v-html="item.answer"></div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab title="咨询医生">
          <div>
            <van-field v-model="title" type="textarea" placeholder="请描述您想要咨询的问题" rows="2" maxlength="100" size="large"
              :border="true" autosize />
            <van-field v-model="feedBackContent" type="textarea" placeholder="请详细描述发病时间，主要症状，病情变化，治疗经过以及想要获得的帮助（30字以上）"
              rows="10" maxlength="100" size="large" :border="true" autosize />
          </div>
          <div class="skillsTraining-two">
            <van-field rows="1" label="性别" v-model="gender" autosize>
              <template slot="right-icon">
                <svg-icon style="margin-left: -0px;" icon-class="社区医疗-上下箭头" widthW="0.3rem" heightH="0.3rem"
                  @click.native="changeGender()"></svg-icon>
              </template>
            </van-field>
            <van-field v-model="age" label="年龄" />
          </div>
          <div class="mine-out">
            <van-button type="default" @click="confirm()">提交</van-button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "toConsultation",
    components: {},
    data() {
      return {
        title: '',
        gender: '男',
        loading: false,
        finished: false,
        isLoading: false,
        count: 1,
        age: "",
        sex: "男",
        value: "",
        chooseTab: 0,
        feedBackContent: "",
        feedBackContentList: []
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getInfo();
    },
    methods: {
      onLoad() {
        this.getInfo();
      },
      search() {
        this.getInfo();
      },
      onRefresh() {
        this.feedBackContentList = []
        this.count = 1
        this.getInfo();
      },

      confirm() {
        let data = {
          "age": this.age,
          "gender": this.gender == '男' ? 1 : 2,
          "problem": this.feedBackContent,
          title: this.title
        }
        mine.medicalAdvisory_v1_create(data).then(res => {
          if (res.code == "0") {
            this.$toast("")
            this.$router.push({
              path: '/work/communityHealth/myConsultation'
            })
          } else {
            this.$toast(res.msg);
          }
        });
      },
      changeGender() {
        this.gender == '男' ? this.gender = '女' : this.gender == '女' ? this.gender = '男' : ''
      },
      getInfo() {
        let data = {
          curPage: this.count,
          pageSize: (this.count) * 10,
          condition: this.value
        };
        mine.commonAdvisory_v1_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.feedBackContentList = [...this.feedBackContentList, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss" scoped>
  #toConsultation {
    p {
      margin: 5px 0;
    }

    background: #fff;

    .toConsultation-body {
      padding: 10px 20px;
    }

    .feedBackTheme {
      text-align: left;
      padding-left: 20px;
      font-size: 16px;
      color: #333333;
    }

    .mine-out {
      margin-top: 26%;

      button {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        background: #dc4630;
        border-radius: 44px;
      }
    }

    .van-ellipsis {
      font-size: 18px;
    }

    [class*="van-hairline"]::after {
      border: none;
    }

    .van-field__label span {
      font-size: 14px;
    }

    .van-field__control {
      background: #f5f7fa;
      border-radius: 4px;
      padding: 0.2em;
    }

    .van-field__body textarea {
      height: 180px;
    }

    .van-field__label {
      text-align: left;
      max-width: 70px;
    }

    .van-cell .van-cell__value {
      height: 60px;
    }

    .van-cell--large .van-cell__value {
      height: 160px;
    }

    .toConsultation-question {
      margin-top: 25px;

      >p {
        padding: 5px;
      }

      >p:nth-child(1) {
        font-weight: bold;
        font-size: 16px;
      }

      >p:nth-child(2) {
        font-weight: 300;
        font-size: 14px;
      }
    }

    .van-search {
      padding-left: 0;
    }

    .van-tab span.van-ellipsis {
      font-size: 16px;
      font-weight: 600;
    }
  }
</style>
<style lang="scss">
  #toConsultation {
    .van-tab span.van-ellipsis {
      font-size: 16px;
      font-weight: 600;
    }

    .van-cell--large {
      padding: 10px 0;
    }

    textarea.van-field__control {
      background: #f5f5f5;
      padding: 10px;
    }

    input {
      background: #f5f5f5;
    }

    .skillsTraining-two {
      display: flex;

      .van-field {
        width: 50%;
        padding: 10px 5px;
      }

      .van-field__label {
        width: 30px;
        padding-right: 10px;
      }
    }

    .van-field__right-icon {
      margin-left: -20px;
    }

    textarea {
      border-radius: 4px;
    }
  }
</style>